<template>
  <div>
    <el-dialog
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      :append-to-body="true"
      title="选择权益"
      width="850px"
      @close="close"
    >
      <el-table
        ref="multipleTable"
        :data="tableData"
        :span-method="objectSpanMethod"
        border
        style="width: 100%; margin-top: 20px"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="rightsType"
          label="权益类型"
          width="180"
          fixed
          align="center"
        >
        </el-table-column>
        <el-table-column prop="rights" label="权益" align="center">
        </el-table-column>
        <el-table-column prop="rightsText" label="权益文本示例" align="center">
        </el-table-column>
        <el-table-column label="图标" align="center">
          <template slot-scope="scope">
            <img
              :src="fileBaseUrl + scope.row.iconUrl"
              style="height: 50px; width: 50px"
            />
          </template>
        </el-table-column>
      </el-table>
      <div class="tree-content"></div>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" round @click="hide">取 消</el-button>
        <el-button size="small" round type="primary" @click="submit"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>


<script>
import { openCardBoon } from "@/api/vip";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      resolve: null,
      reject: null,
      // 状态
      loading: false,
      dialogVisible: null,

      tableData: [],
      multipleSelection: [],
    };
  },
  computed: {
    ...mapGetters(["fileBaseUrl"]),
  },
  mounted() {
    this.getOpenCardBoon();
  },
  methods: {
    getOpenCardBoon() {
      openCardBoon().then((res) => {
        let tableData = [];
        const { data } = res;

        console.log(data)
        for (let key in data) {
          data[key].forEach(
            (item, index) => index === 0 && (item.length = data[key].length)
          );
          if(key !== '开卡权益') {
            tableData = [...tableData, ...data[key]];
          }
        }
        tableData = [...data['开卡权益'], ...tableData]
        this.tableData = tableData;
      });
    },
    open(ids) {
      if(!this.tableData.length) return this.$message({ message: '无会员卡',type: 'warning' });
      this.$nextTick(() => {
        setTimeout(() => {
        let multipleTable = this.$refs.multipleTable
        this.tableData.forEach(item => {
          if(ids.includes(item.id)) {
            multipleTable.toggleRowSelection(item, true)
          }
        })



      },0)
      })

      this.show();
      return new Promise((resolve, reject) => {
        this.resolve = resolve;
        this.reject = reject;
      });
    },
    show() {
      this.dialogVisible = true;
    },

    close() {
      this.loading = false;
    },
    hide() {
      this.resolve = null;
      this.reject = null;
      this.dialogVisible = false;
    },
    submit() {
      if (!this.multipleSelection.length) return this.$message({ message: '请选择权益', type: 'warning'});
      this.resolve(JSON.parse(JSON.stringify(this.multipleSelection)));
      this.multipleSelection = [];
      this.$refs.multipleTable.clearSelection();
      this.hide();
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      let rowIndexArr = [];
      this.tableData.forEach((item, index) => {
        if (item.length) {
          rowIndexArr.push(index);
        }
      });
      if ([1].includes(columnIndex)) {
        if (rowIndexArr.includes(rowIndex)) {
          return {
            rowspan: this.tableData[rowIndex].length,
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  },
};
</script>
